import "./slider.css";
import "./btns.css";

import Slider from "./module/index.js";
import { getData, getDelayedData } from "api/getData";
import render from "./slider.art";
import { bannnerUrl } from "./config";

const sliderCon = document.getElementById("slider-content");

getDelayedData(bannnerUrl).then((data) => {
  sliderCon.innerHTML = render({
    items: data,
  });

  const slider = new Slider(document.querySelector(".slider"), {
    initialIndex: 2,
    animation: true,
    speed: 1000,
    autoplay: 1600,
  });

  const banner = document.querySelector(".banner");

  banner.addEventListener("mouseenter", () => {
    slider.pause();
  });

  banner.addEventListener("mouseleave", () => {
    slider.autoplay();
  });
});
